import {computed, ref} from 'vue';
import {useWebSocket} from '@vueuse/core';
import {defineStore} from 'pinia';

import {notification} from 'ant-design-vue';

import dayjs from 'dayjs';

import {useUserStore} from './user';
import {SvgNoticeIconUrl} from '#/icons';

import type {NotificationItem} from '#/layouts/widgets';

export const useNoticeStore = defineStore('core-notice', () => {
        const noticeList = ref<NotificationItem[]>([]);

        const userStore = useUserStore();
        const userId = computed(() => {
            return userStore.userInfo?.userId || '';
        });

        const myselfNoticeList = computed(() => {
            return noticeList.value.filter((item) => item.userId === userId.value);
        });

        const start = () => {
            const {} = useWebSocket('ws://127.0.0.1:8888/ws?userId=' + userId.value + '&channel=system-notice', {
                heartbeat: {
                    message: 'ping',
                    interval: 30000,
                    pongTimeout: 5000,
                    responseMessage: 'pong',
                },
                autoReconnect: {
                    retries: 10,
                    delay: 3000,
                    onFailed: () => {
                        console.log('Web Socket 重试连接失败');
                    }
                },
                onMessage: (ws, event) => {
                    const message = event;
                    if (!message) return;
                    console.log(`Web Socket 接收消息=${message?.data}`);

                    notification.info({
                        message: '通知',
                        description: '您有一条新消息',
                    });

                    noticeList.value.unshift({
                        userId: userId.value,
                        avatar: SvgNoticeIconUrl,
                        title: '系统通知',
                        message: message?.data,
                        isRead: false,
                        date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                    });
                },
            });
        };

        const setRead = (item: NotificationItem) => {
            !item.isRead && (item.isRead = true);
        };

        const setAllRead = () => {
            noticeList.value.filter((item) => item.userId === userId.value)
                .forEach((item) => {
                    item.isRead = true;
                });
        };

        const clearAll = () => {
            noticeList.value = noticeList.value.filter(
                (item) => item.userId !== userId.value,
            );
        }

        const showDot = computed(() =>
            noticeList.value.filter((item) => item.userId === userId.value)
                .some((item) => !item.isRead),
        );

        function $reset() {
            // noticeList.value = [];
        }

        return {
            $reset,
            clearAll,
            noticeList,
            myselfNoticeList,
            setAllRead,
            setRead,
            showDot,
            start,
        };
    },
    {
        persist: {
            pick: ['noticeList'],
        },
    },
);